<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tone莫斯码</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <link rel="stylesheet" href="../libs/pico.min.css">
    <style type="text/css">
        body {
            margin: 0;
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <main id="main" class="container">
        <article data-theme="light" style="text-align: center;">
            <label>输入摩斯码（短按键盘向下键是. 长按键盘向下键是-）
                <input id="timeInput" name="time" value=''>
            </label>
            <button onmousedown="keyDown({key:'ArrowDown'})" onmouseup="keyUp({key:'ArrowDown'})">短按是.长按是-</button>
            <button onclick="onclear()">清除</button>
        </article>
    </main>
    <script>
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();
        var now;
        var keyDict={};
        var morseCode='';
        var clearTime=0;
        const cc='C'+Math.floor(Math.random()*8);
        const [MIN,MAX]=[200,300];
        const input=document.getElementById('timeInput');
        
        window.addEventListener('keydown', keyDown,true);
		window.addEventListener('keyup', keyUp,true);
        function keyDown(e) {
            var key = e.key;
            if(keyDict[key])return;
            keyDict[key]=true;
            //console.log(e)
            if(key=='ArrowDown'){
                now = Tone.now();
                synth.triggerAttack(cc, 0)//开始播发
                TimeFactory.useTime('keyName',0);
            }else{
                onclear();
            }
            clearTimeout(clearTime);
        }
        function keyUp(e) {
             var key = e.key;
             delete keyDict[key];
            if(key=='ArrowDown'){
                synth.triggerRelease(cc, now)
                TimeFactory.useTime('keyName',1,onTimeOver,'');
            }
        }
        function onTimeOver(num){
            console.log(num);
            num<MIN?morseCode+='.':morseCode+='-';
            clearTime=setTimeout(()=>{
                if(morseCode!=''){
                    console.log(morseCode);
                    input.value+=Unify.mosi(morseCode,1)
                    morseCode='';
                }
            },1000);
        }
        function onclear(){
            input.value='';
            morseCode='';
            clearTimeout(clearTime);
        }
        if(Unify.isMobile()){//移端上操作
            //移动端上的长按事件
            document.addEventListener('touchstart',touch, false);
            document.addEventListener('touchend',touch, false);
            function touch (event){
                event.stopPropagation();
                var event = event || window.event;
                switch(event.type){
                    case "touchstart":
                        keyDown({key:'ArrowDown'})
                        break;
                    case "touchend":
                        keyUp({key:'ArrowDown'})
                        break;
                } 
            }
        }
    </script>
</body>

</html>
